<template>
  <view style="padding-bottom:180rpx">
	  <!-- 公共组件-每个页面必须引入 -->
	  <public-module></public-module>
    <view class="notes">
      <view class="notes-top">
        <view class="notes-top-t">
          <u-avatar :src="info.userInfo.userHeader" size="60"></u-avatar>
        </view>
        <view class="notes-top-b">
          <span style="padding-right:20rpx">{{info.userInfo.userName}}</span><span>{{info.userInfo.mobile}}</span>
        </view>
      </view>
      <view class="notes-content">
         <div class="notes-title">公司信息</div>
		 <u-cell-group>
		     <u-cell v-for="item in info.list" :key="item.relationId">
				 <div slot="title" style="flex:1">
				     {{item.companyName}}
				 </div>
				 <div slot="label" style="font-size: 24rpx;color: #A5A5A5;margin-top:10rpx">
				    产品线： {{item.goods | fifgoods}}
				 </div>
				 <div slot="value" class="cell-btn" style="width:200rpx;flex:none">
				     <div style="padding-right:20rpx;" @click="showPop('edit',item)"><u-icon name="edit-pen" size="24" color="#FF5E01"></u-icon></div>
					 <div style="height:40rpx;width:1px;background:#ddd"></div>
					 <div style="padding-left: 20rpx"><u-icon name="trash" size="24" @click="setGl(item.relationId,3)"></u-icon></div>	 
				 </div>
				
			 </u-cell>
		 </u-cell-group>
      </view>
    </view>
    <view class="notes-button">
      <u-button type="primary" shape="circle" @click="showPop('add')"  color="linear-gradient(180deg, #FF5E01 0%, #FF5E01 100%)">分配公司</u-button>
    </view>
	
	<!--编辑新增公司-->
	<u-popup :show="show" mode="bottom" @close="show=false" :round="23">
		<div style="font-size:30rpx;font-weight: bold;line-height: 50px;padding-left:32rpx">公司信息</div>
		<div style="padding:0rpx 32rpx 150rpx 32rpx">
			<u--form class="u-form" labelPosition="left" labelWidth='180rpx' :model="form" :rules="rules" ref="uForm" errorType="toast">
				  <u-form-item label="公司名称" prop="companyName" borderBottom  @click='changeCompany' required v-if="popType == 'add'">
					<u--input v-model="form.companyName" input-align="right" disabled disabledColor="#ffffff" placeholder="选择公司"
					  border="none" style="pointer-events: none"></u--input>
					  <div  slot="right">
						   <u-icon slot="right" name="arrow-right" :customStyle="{marginRight: '10px'}" ></u-icon>
					  </div> 
				  </u-form-item>
				  <u-form-item label="公司名称" borderBottom v-else>
					<u--input v-model="form.companyName" input-align="right" disabled  disabledColor="#ffffff" 
					  border="none"></u--input>
				  </u-form-item>
				  <u-form-item label="负责产品线" prop="goods" borderBottom  @click="showMainBu" required>
					<u--input :value="form.goods | fifgoods" input-align="right" disabled disabledColor="#ffffff"
					  placeholder="请选择负责产品线" border="none" style="pointer-events: none"></u--input>
					<div  slot="right">
						<u-icon slot="right" name="arrow-right" :customStyle="{marginRight: '10px'}" ></u-icon>
					</div>
				  </u-form-item>
			</u--form>
		</div>
		  
		  <div style="width:100%;padding:24rpx;bottom:0;background: #fff;border-top:1px solid #eee">
		      <u-button text="确认" shape="circle" type="primary" @click="save"></u-button>
		  </div>
		  <u-picker :show="show2" :columns="columns" keyName="name" @confirm='confirm' closeOnClickOverlay
		    @cancel='show2 = false' @close="show2 = false"></u-picker>
	</u-popup>
	<!--品名-->
	<category ref="category" @chooseItem="chooseCategory"></category>
	

	  
  </view>
</template>

<script>
  import {subUserInfo,setGlCompany,setSubCompanyGoods,getSubCanSetCompany} from '@/config/api.js'
  import category from '@/components/module/category';
  const defaultForm = {
  	  companyId: '',
  	  companyName: '', 
  	  goods:[], 
  	  relationId: '', 	 
	   userId:''
  }
  export default {
    data() {
      return {
        info: {},
		userId:'',
		form:JSON.parse(JSON.stringify(defaultForm)),
		show:false,
		show2:false,
		columns:[],
		rules:{
			'companyName': {
			  type: 'string',
			  required: true,
			  message: '请选择公司',
			  trigger: ['blur', 'change']
			},
			 'goods': {
			   type: 'array',
			   required: true,
			   message: '请选择负责产品线',
			   trigger: ['blur', 'change']
			 },
			
	   },
	   popType:''
      }
    },
	components: {
	  category
	},
    onLoad(e) {
      this.userId = e.userId
	  this.init()
    },
	filters:{
		fifgoods(list){
			let arrnew = ''
			arrnew = list.map((obj,index) => {
			    return obj.categoryName;
			}).join(",")
			return arrnew
		},
		
		
	},
    methods: {
		init(){
			this.getDetail()
			this.getList()
		},
		getList(){
			this.columns = []
			getSubCanSetCompany({userId:this.userId}).then((res)=>{
				this.columns.push(res)
			})
		},
		setGl(relationId,type){
			let text = ''
			if(type == 3){
				text = '确定解除关联吗？' 
			}else if(type == 2){
				text = '确定拒绝关联申请吗？' 
			}else if(type == 1){
				text = '确定通过关联申请吗？' 
			}
			uni.showModal({
			  title: '提示',
			  content:text,
			  success: (res) => {
			    if (res.confirm) {
			      setGlCompany({
			        relationId: relationId,
					setType:type
			      }).then(() => {
			       this.init()
			      })
					  
			    } else if (res.cancel) {
			      console.log('用户点击取消');
			    }
			  }
			});
		},
		
		changeCompany(){
			this.show2 = true;
		},
		
		// 公司名称选择确定后触发
		confirm(e) {
		   this.form.companyId = e.value[0].id
		   this.form.companyName = e.value[0].name
		   this.show2 = false
		},
		
		
      getDetail() {
        subUserInfo({ userId: this.userId }).then(res => {
           this.info = res
        })
      },
	  
	  showPop(type,item){
		  this.form = JSON.parse(JSON.stringify(defaultForm));
		  this.form.userId = this.info.userInfo.userId
		  this.show = true;
		  this.popType = type;
		  if(item){
			 for(let key  in defaultForm){
			   this.form[key] = item[key] ? item[key] : defaultForm[key];
			 } 
		  }
	  },
	  
      showMainBu() {  
		  this.$refs.category.init('more', this.form.goods); 
      },
      
      
      //选择品名
      chooseCategory(list) {
         let data = {};
		 let categoryIds = list.map((obj,index) => {
			    return obj.categoryId;
			});
		this.form.goods = JSON.parse(JSON.stringify(list));
      },
	  
	  save(){
		  
		  this.$refs.uForm.validate().then(res => {
			  let data = JSON.parse(JSON.stringify(this.form))
			  data.companyCategory = data.goods.map((obj,index) => {
			  			    return obj.categoryId;
			  });
		    setSubCompanyGoods(data).then(res => {
				this.show = false
		      uni.$u.toast('提交成功')
		  	this.init()
		    })
		  }).catch(errors => {
		  	 
		  }) 
	  }
    }
  }
</script>

<style lang="scss">
  @import '@/style/wmj.scss';
  .notes-button{
	  position: fixed;
	  bottom:0;
	  width:100%;
	  padding:32rpx;
	  background: #fff;
	  z-index: 5;
  }
  .notes-content {
    background-color: #fff;
    border-radius: 55rpx 55rpx 0 0;
    padding: 40rpx 0;
	margin-top:-100rpx;
	min-height:calc(100vh - 346rpx);
    .notes-title{
		font-size: 36rpx;
		font-weight: bold;
		line-height: 50rpx;
		color: #070D14;
		padding:10rpx 50rpx 25rpx 70rpx;
		position: relative;
	}
	.notes-title::after{
		content: " ";
		position: absolute;
		width: 8rpx;
		height: 38rpx;
		background: #FF5E01;
		border-radius: 6rpx;
		overflow: hidden;
		top: 18rpx;
		left:50rpx;
	}
	.cell-btn{
		@include flexbox(flex-end,center);
	}
  }
</style>